<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Nunito+Sans:opsz@6..12&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css">
    <style>
        /* CSS styles for the Author page */
        html, body {
           margin: 0px;
           padding: 0px;
           
       }
       .page{
        display: block;
        align-items: center;
       }
       .header{
        display: flex;
        align-items: center;
       padding: 10px 20px;
        background-color: black;
        justify-content: space-around;
     

    }
    .header .options{
        padding: 5px 10px;
        display: flex;
        align-items: center;
        background-color: black;
        
    }


    .header .icon{
        padding: 5px 10px;
        display: flex;
        align-items: center;
        color: white;

    }
    .header .icon .icons{
        padding: 0 20px;
        font-size: 1.8rem;
        cursor: pointer;
    }
    .header .icon .icons i:hover{
       
        color: rgb(91, 148, 240);
       
    }
    .header .icon .insta  i:hover{
       
       color: rgb(220, 48, 134);
      
   }
    .header .options h2{
        padding: 0 20px;
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif;
        color: rgb(250, 248, 248);
        cursor: pointer;
        
    }
    .options h2:hover{
        color: rgb(91, 148, 240);
        transform: scale(1.2);
    }

    .body{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 20px 100px;
        background-color: white;
    }
    .body .intro{
        display: block;
       
    }
    .intro h2{
        font-size: 4rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;

    }
    .intro h3{
        font-size: 1.6rem;
       font-family: 'Roboto Condensed', sans-serif;
        font-weight: 600;
        color: rgb(119, 116, 116);

    }
    .intro h4{
        font-size: 1rem;
        word-spacing: 0.2rem;
        font-family: 'Nunito Sans', sans-serif;
        color: rgb(118, 116, 116);


    }
    .body .pro-img{
       object-fit: cover;
    }

   </style>
    <title>Author</title>
</head>
<body>
    <div class="page">
        <div class="header">
            <div class="options">
                <div class="about">
                    <h2>about</h2>
                </div>
                <div class="featured">
                    <h2>featured</h2>
                </div>
                <div class="portfolio">
                    <h2>portfolio</h2>
                </div>
                <div class="about">
                    <h2>blog</h2>
                </div>
                <div class="contact">
                    <h2>contact</h2>
                </div>
            </div>
            <div class="icon">
                <div class="face icons">
                    <i class="ri-facebook-box-fill"></i>
                  
                </div>
                <div class="insta icons">
                    <i class="ri-instagram-line"></i>
                </div>
                <div class="twit icons">
                    <i class="ri-twitter-line"></i>
                </div>
                <div class="link icons">
                    <i class="ri-linkedin-box-fill"></i>
                </div>
            </div>
            
        </div>
        <div class="body">
            <div class="intro">
                <h2>About me</h2>
                <h3>I am a UI designer and front end developer from sydney, australia</h3>
                <h4>I'm a UX/UI Designer with a background in Psychology, which gives me a unique edge in empathizing with users and improving their experience through design. My research experience has refined my problem-solving skills and user insights. I'm constantly seeking new ways to learn and grow through real-world experiences  </h4>
                <h4>My skills include user experience design, interaction design, user research, collaboration, problem-solving, and organization. </h4>
                <h4>Let’s work together to create a seamless user experience using tools such as Figma/FigJam, Miro, Adobe XD, and Trello.”</h4>
            </div>
            <div class="pro-img">
                <img src="https://assets-global.website-files.com/61dc0796f359b6eeecc06eab/63d3ee5adc541c30262a3190_6399f72ae8f94f1b0a8f5165_jack_b.png" alt="img">
            </div>
        </div>
    </div>
    
    
</body>
</html>